<template>
  <div class="">
    <div class="publish_task_con">
      <div class="task_image">
        <el-avatar shape="square" :size="60" :src="taskData.imageUrl"></el-avatar>
      </div>
      <div class="publish_task_main">
        <div class="task">
          <p>任务标题：</p>
          <p :title= "taskData.taskTitle"  class="publish_task_item">{{ taskData.taskTitle }}</p>
        </div>
        <div class="task">
          <p>接任务人：</p>
          <p :title= "taskData.taskTitle"  class="publish_task_item">{{ taskData.receiveName }}</p>
        </div>
        <div class="task">
          <p>专业方向：</p>
          <p :title= "taskData.taskTitle"  class="publish_task_item">{{ taskData.career }}</p>
        </div>
        <div class="task">
          <p>项目资金：</p>
          <p :title= "taskData.taskTitle"  class="publish_task_item">{{ taskData.salary }}</p>
        </div>
      </div>
    </div>
    <div style="clear: both">
      <el-divider></el-divider>
    </div>
    <el-form :model="commonForm" :rules="rules" ref="form">
      <el-form-item label="技术人员评价" prop="evaluatedDesc">
        <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入评价内容"
            v-model="commonForm.evaluatedDesc">
        </el-input>
      </el-form-item>

      <div style="clear: both">
        <el-divider></el-divider>
      </div>
      <div class="publish_mian">
        <div class="bgName">
          <img src="../../../../../assets/img/sel@2x.png">
          <div class="unName">匿名</div>
        </div>
        <div class="rate">
          <div class="el_rate">
            <el-form-item class="publish_mian_item" label="技术评分" prop="skillScore">
              <el-rate
                  v-model="commonForm.skillScore"
                  show-text>
              </el-rate>
            </el-form-item>

          </div>
          <div class="el_rate">
            <el-form-item class="publish_mian_item" label="态度评分" prop="attitudeScore">
              <el-rate
                  v-model="commonForm.attitudeScore"
                  show-text>
              </el-rate>
            </el-form-item>
          </div>
          <div class="el_rate">
            <el-form-item class="publish_mian_item" label="项目评分" prop="punctualityScore">
              <el-rate
                  v-model="commonForm.punctualityScore"
                  show-text>
              </el-rate>
            </el-form-item>
          </div>
        </div>
      </div>
      <!--    /order/myReleaseProgressTask-->

      <div class="publish" @click="submitComment('form')">发布</div>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      commonForm: {
        userEvaluateId: '',
        userEvaluatedId: '',
        evaluatedDesc: '',
        skillScore: 0,
        attitudeScore: 0,
        punctualityScore: 0,
      },
      orderId: "",
      rules: {
        textarea: [
          {required: true, message: '请输入项目评价', trigger: 'blur'},
          {min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur'}

        ],
        skillScore: [{required: true, message: '请选择满意度', trigger: 'change', type: 'number', min: 0.5}],
        attitudeScore: [{required: true, message: '请选择满意度', trigger: 'change', type: 'number', min: 0.5}],
        punctualityScore: [{required: true, message: '请选择满意度', trigger: 'change', type: 'number', min: 0.5}]
      },
      taskData: {}

    }
  },
  methods: {
    submitComment(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.publicComment()
        } else {
          Vue.prototype.$notify.error({
            title: "错误",
            message: "任务表单提交失败"
          })
          return false;
        }
      });
    },
    async publicComment() {
      const {data: res} = await this.$http.post('/evaluation/evaluation', {
        userEvaluateId: this.taskData.sendId,
        userEvaluatedId: this.taskData.receiveId,
        evaluatedDesc: this.commonForm.evaluatedDesc,
        skillScore: this.commonForm.skillScore,
        attitudeScore: this.commonForm.attitudeScore,
        punctualityScore: this.commonForm.punctualityScore,
        orderId:this.orderId
      })
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "评价成功"
        })
        await this.$router.push('/userLoginMain/personCenter/pCMyWork')
      }

    },
    async initComment() {
      this.orderId = this.$route.query.id
      const {data: res} = await this.$http.get('/order/commentOrder/' + this.$route.query.id)
      this.taskData = res.content

    }
  },
  mounted() {
    this.initComment()

  }


}
</script>

<style>
.task_image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.publish_task_main{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.publish_task_con{
  display: flex;
}
.task {
  margin-left: 25px;
}
.publish_task_item{
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el_rate {
  margin-bottom: 13px;
}

.rate {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.unName {
  display: inline-block;
  color: #333333;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 1.2rem;
  font-weight: 500;
}

.bgName {
  display: flex;
  align-items: center;
}
.publish_mian{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.publish_mian_item{
  display: flex;
  align-items: center;
}
.rate .publish_mian_item{
  margin-bottom: 0;
}
.publish_mian_item label{
  margin-bottom: 0!important;
}
.publish {
  width: 100%;
  height: 40px;
  background: #3fc9a5;
  color: white;
  font-size: .875rem;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
}
</style>